<template>
  <div>
    <!-- 二级路由坑 -->
    <router-view v-if="$route.path=='/home/search'"></router-view>
    <router-view v-else-if="$route.path=='/home/channel'"></router-view>
    <div v-else>
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        shape="round"
        @click="$router.push('/home/search')"
      />
      <!-- 轮播图组件 -->
      <swiper :bannerArr="bannerArr"></swiper>
      <!-- 导航栏组件 -->
      <Grid :channelArr="channelArr"></Grid>
      <!-- 品牌制造商直供 brand组件 -->
      <Brand :brandList="brandList"></Brand>
      <!-- 周一周四新品首发组件 -->
      <Newproduct :newGoodsList="newGoodsList"></Newproduct>
      <!-- 人气推荐组件 -->
      <Hot :hotGoodsList="hotGoodsList"></Hot>
      <!-- Special专题组件 -->
      <Special :topicList="topicList"></Special>
      <!-- CategoryList商品分类 -->
      <div class="div" v-for="item in categoryList" :key="item.id">
        <h4>{{ item.name }}</h4>
        <CategoryList :goodslist="item.goodsList"></CategoryList>
      </div>
    </div>
  </div>
</template>
<script>
// 引入轮播图组件
import swiper from "@/components/Swiper";
// 导入首页接口请求
import { getIndexData } from "@/utils/https";
// 引入导航栏组件
import Grid from "@/components/Grid";
// 引入brand组件
import Brand from "@/components/Brand";
// 引入Newproduct
import Newproduct from "@/components/Newproduct";
// 引入hot
import Hot from "@/components/Hot";
// 引入Special组件
import Special from "@/components/Special";
// 引入商品分类
import CategoryList from "@/components/CategoryList";
export default {
  name: "home",
  data() {
    return {
      value: "", //搜索关键字
      bannerArr: [], //轮播图数据
      channelArr: [], //导航数据
      brandList: [], //品牌制造商直供数据
      newGoodsList: [], //周一周四新品首发
      hotGoodsList: [], //人气推荐
      topicList: [], //专题精选
      categoryList: [], //商品分类
    };
  },
  components: {
    swiper,
    Grid,
    Brand,
    Newproduct,
    Hot,
    Special,
    CategoryList,
  },
  methods: {},
  created() {
    getIndexData().then((res) => {
      // console.log(res);
      this.bannerArr = res.data.data.banner;
      this.channelArr = res.data.data.channel;
      this.brandList = res.data.data.brandList;
      this.newGoodsList = res.data.data.newGoodsList;
      this.hotGoodsList = res.data.data.hotGoodsList;
      this.topicList = res.data.data.topicList;
      this.categoryList = res.data.data.categoryList;
    });
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.div {
  padding-top: 10px;
  h4 {
    text-align: center;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
  }
}
</style>
